import React, {Component} from 'react';

import {
    View,
    Text,
    Image,
    Touchable,
    TouchableHighlight
} from 'react-native';
import TrendingTab from './TrendingTab'
import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view';
import NavigationBar from "../../common/NavigationBar";
import LanguageDao, {FLAG_LANGUAGE} from "../../expand/Dao/LanguageDao";
import {Popover} from 'react-native-modal-popover'

import TimeSpan from '../../model/TimeSpan'

const timeSpanArray = [
    new TimeSpan('今天', 'since=daily'),
    new TimeSpan('本周', 'since=weekly'),
    new TimeSpan('本月', 'since=monthly'),
]

export default class TrendingPage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            language  : [],
            isVisible : false,
            buttonRect: {},
            timeSpan  : timeSpanArray[0]
        }
    }

    componentDidMount() {
        this.onLoadLanguage()
    }

    onLoadLanguage() {
        let languageDao = new LanguageDao(FLAG_LANGUAGE.flag_language)
        languageDao.fetch()
            .then(result => {
                this.setState({
                    language: result
                })
            })
            .catch(error => {
                console.warn(error)
            })
    }

    showPopover() {
        this.button.measure((ox, oy, width, height, px, py) => {
            this.setState({
                isVisible : true,
                buttonRect: {x: px, y: py, width: width, height: height}
            });
        });
    }

    closePopover() {
        this.setState({
            isVisible: false
        })
    }

    renderTitleView() {
        return (
            <View>
                <TouchableHighlight ref={(button) =>
                    this.button = button
                } onPress={() => {
                    this.showPopover()
                }}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <Text style={{
                            fontSize  : 18,
                            color     : 'white',
                            fontWeight: '400'
                        }}>趋势{this.state.timeSpan.showText}</Text>
                        <Image style={{width: 12, height: 12, marginLeft: 5}}
                               source={require('../../../res/images/ic_spinner_triangle.png')}/>
                    </View>
                </TouchableHighlight>
            </View>
        )
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <NavigationBar titleView={this.renderTitleView()}/>
                <ScrollableTabView
                    initialPage={0}
                    tabBarBackgroundColor='#2196F3'
                    tabBarInactiveTextColor='mintcream'
                    tabBarActiveTextColor='white'
                    tabBarUnderlineStyle={{backgroundColor: '#e7e7e7', height: 2}}
                    renderTabBar={() => <ScrollableTabBar activeTab={1}/>}
                >
                    {this.state.language.map((result, i, arr) => {
                        let lan = arr[i]
                        return lan.checked ?
                            <TrendingTab key={i} tabLabel={lan.name} keyword={lan.path}
                                         timeSpan={this.state.timeSpan} {...this.props} /> : null
                    })}
                </ScrollableTabView>
                <Popover
                    backgroundStyle={{backgroundColor: 'rgba(0, 0, 0, 0)'}}
                    contentStyle={{backgroundColor: '#343434', opacity: 0.82}}
                    arrowStyle={{borderTopColor: '#343434', opacity: 0.82}}
                    visible={this.state.isVisible}
                    fromRect={this.state.buttonRect}
                    onClose={() => {
                        this.closePopover()
                    }}
                    placement="bottom"
                >
                    {timeSpanArray.map((val, i, arr) => {
                        return (<TouchableHighlight
                            onPress={() => {
                                this.setState({
                                    timeSpan: val
                                })
                                this.closePopover()
                            }}
                            key={i}><Text style={{
                            fontSize  : 18,
                            color     : 'white',
                            fontWeight: '400',
                            padding   : 8
                        }}>{val.showText}</Text></TouchableHighlight>)
                    })}
                </Popover>
            </View>
        )
    }
}
